<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="./jquery-3.2.1.js"></script>        
    <script src="./bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <!-- <link rel="stylesheet" href="css/style.css"> -->
    </head>
    <body>
        <div class = "container">
            <h2>统一建模语言测试</h2>
            
                <div class="row">
                    <div class="col-xs-6 col-sm-3" >
                        <p>考试科目：统一建模语言</p>
                        <p>班级：<input type="text" ></p>
                    </div>
                    <div class="col-xs-6 col-sm-3" >
                        <p>时间：100分钟</p>
                        <p>学号：<input type="text" ></p>
                    </div>
                    <div class="col-xs-6 col-sm-3">
                        <p>得分：</p>
                        <p>姓名：<input type="text"></p>
                    </div>
                </div>
            

           <form action="">
            <h3>一、第一题（每空5分，共20分）</h3>
            <div class = "container"id = "blank">
                <div class="row" >
                    <div class="col-md-12">1.UML的中文全称是：<input type="text"></div>
                    <div class="col-md-12">2.对象最突出的特征是：
                        <input type= "text" >
                        <input type= "text" >
                        <input type= "text" >
                    </div>
               </div>
            </div>
           

             <h3>二、选择题（每题10分，共20分）</h3>
                <div class = "container"id = "oneChoice">
                    <div class="row">
                    <form>  
                        <div class="col-md-12">1.UML与软件工程的关系是：
                            <div class="col-md-12"><input  type="radio"  name="radiotrue"  value="A" >(A)UML就是软件工程</div>
                            <div class="col-md-12"><input  type="radio"  name="radiotrue"  value="B">(B)UML参与到软件工程中软件开发的几个过程</div>
                            <div class="col-md-12"><input  type="radio"  name="radiotrue"  value="C">(C)UML与软件工程无关</div>
                            <div class="col-md-12"><input  type="radio"  name="radiotrue"  value="D">(D)UML是软件工程的一部分</div> 
                        </div>
                    </form> 
                    <form>
                        <div class="col-md-12">2.JAVA语言支持：
                           <div class="col-md-12"><input type="radio" name="radiotrue1"  value="A">(A)单继承</div>
                           <div class="col-md-12"><input type="radio" name="radiotrue1"  value="B">(B)多继承</div>
                           <div class="col-md-12"><input type="radio" name="radiotrue1"  value="C">(C)单继承和多继承都支持</div>
                           <div class="col-md-12"><input type="radio" name="radiotrue1"  value="D">(D)单继承和多继承都不支持 </div>
                        </div>
                    </form>
                    </div>
                </div> 

                 <h3> 三、多择题（每题10分，共20分）</h3>
                <div class = "container"id = "mChoice" >
                    <div class = "row">
                        <div id ="mChoice1">
                        <div class="col-md-12">1.用户的粒度分为以下哪三种:
                            <div class="col-md-12"><input type = "checkbox" name="checkbox"  value="A" >(A)概述级</div>
                            <div class="col-md-12"><input type = "checkbox" name="checkbox"  value="B" >(B)需求级</div>
                            <div class="col-md-12"><input type = "checkbox" name="checkbox"  value="C">(C)用户目标级</div>
                            <div class="col-md-12"><input type = "checkbox" name=" heckbox"  value="D">(D)子功能级</div>
                        </div>
                        </div>

                        <div id ="mChoice2">
                        <div class="col-md-12">2.类图由以下哪三部分构成：
                            <div class="col-md-12"><input type = "checkbox" name="checkbox"  value="A" >(A)名称(Name)</div>
                            <div class="col-md-12"><input type = "checkbox" name="checkbox"  value="B">(B)属性(Attribute)</div>
                            <div class="col-md-12"><input type = "checkbox" name="checkbox"  value="C">(C)操作(Operation)</div>
                            <div class="col-md-12"><input type = "checkbox" name="checkbox"  value="D">(D)方法(Function)</div>
                        </div>
                        </div>
                        
                    </div>
                </div>
                <h3>四、判断题（每题10分，共20分）</h3>
                    <div class = "container"id="jQuestion">
                        <div class = "row">
                    <form >
                        <div class="col-md-12">1.用例图只是用于和客户交流和沟通的，用于确定需求。
                            <input type = "radio" name="radiotrue" value="√" >√
                            <input type = "radio" name="radiotrue" value="×" >×
                        </div>
                    </form>
                    <form >
                        <div class="col-md-12">2.在状态图中，终止状态在一个状态图中允许有任意多个。
                            <input type = "radio" name="radiotrue" value="√" >√
                            <input type = "radio" name="radiotrue" value="×" >×
                        </div>
                    </form>
                    </div>
                </div>
                 
                <h3>五、简答题（每题20分，共20分）</h3>
                <div class = "container" id = "sQuestion">
                    <div class = "row">
                        <div class="col-md-12">1.简述什么是模型以及模型的表现形式？</div>
                            <div class="col-md-12"><textarea name="name" rows = "10" cols = "75"></textarea></div>
                    </div>
                </div> 
            </br> 
            <p><button type="button" onclick= "test()" value="">计算分数</button></p>
            </form> 
              <script> 
                // 填空题 
                let score=0;
                let rule = ['统一建模语言','封装性','继承性','多态性'] ;
                let check = [];
                let boxs = document.getElementById("blank").getElementsByTagName('input') ;
                console.log(boxs);
                function test(){
                   for(let item of boxs){
                        check.push(item.value);
                    }
                    for (let key in rule) {
                    if(rule[key] === check[key]) {
                         score +=5 ;
                    }
                }
                
                // 单选题
                let rule1 = ['A','C'];
                let check1 =[];
                let boxs1 = document.getElementById('oneChoice').getElementsByTagName('input');
                console.log(boxs1);
                for(let i=0;i<boxs1.length;i++){
                        if(boxs1[i].checked){
                            check1.push(boxs1[i].value);
                        }
                    }
                for(let key in check1){
                    if(check1[key] ===rule1[key]){
                        score +=10;
                    }
                }

                // 多选题1  
                let rule2 = ['A','B','C'] 
                let check2 =[];
                let boxs2 = document.getElementById('mChoice1').getElementsByTagName('input');
                console.log(boxs2);
                    for(let i=0;i<boxs2.length;i++){
                        if(boxs2[i].checked){
                            check2.push(boxs2[i].value);
                        }
                    }
                for(let item of check2){
                    if(rule2.indexOf(item) !=-1){
                        score+=10/3;
                    }
                }
               
                    
               
                
                //多选题2  
                let rule3 = ['A','B','C'] 
                let check3 =[];
                let boxs3 = document.getElementById('mChoice2').getElementsByTagName('input');
                console.log(boxs3);
                    for(let i=0;i<boxs3.length;i++){
                        if(boxs3[i].checked){
                            check3.push(boxs3[i].value);
                        }
                    }
                for(let item of check3){
                    if(rule3.indexOf(item) !=-1){
                    score+=10/3;
                }
                }
                
            //判断题
            let rule4 = ['√','×'];
                let check4 =[];
                let boxs4 = document.getElementById('jQuestion').getElementsByTagName('input');
                console.log(boxs4);
                for(let i=0;i<boxs4.length;i++){
                        if(boxs4[i].checked){
                            check4.push(boxs4[i].value);
                        }
                    }
                for(let key in check4){
                    if(check4[key] ===rule4[key]){
                        score +=10;
                    }
                }

                let rule5 = ['统一建模语言'] ;
                let check5 = [];
                let boxs5 = document.getElementById("sQuestion").getElementsByTagName('textarea') ;
                console.log(boxs5);
                   for(let item of boxs5){
                        check5.push(item.value);
                    }
                    for (let key in rule5) {
                    if(rule5[key] === check5[key]) {
                         score +=20 ;
                    }
                }
               alert(score);
               return score ;
            }
            </script> 
        
        <!--write your code here-->
            <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                Launch demo modal
        </button>
    
    <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        You're ready to go!
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div> 
    </div> 
    </body>
</html>